<!DOCTYPE html>
<html lang="en" class="feedback">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="css/feedback.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="findoutupdate2.html" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">新建图文信息</h1>
			<a href="findoutupdate2.html" onclick="information()" class="mui-icon mui-icon-checkmarkempty mui-pull-right"></a>
		</header>
		<div class="mui-content">
			<textarea id="describe1" name="describe1" rows="8" placeholder="这一刻的想法..."></textarea>
		</div>
		
						<p>图片(选填,提供问题截图,总大小10M以下)</p>
				<div>	
					<li class="mui-table-view">
						<div class="mui-input-row">
							
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<a id="head" class="mui-navigate-right"> 
									<span class="mui-pull-left head">
										<!--<div id='image-list' class="row image-list"></div>--> 
										<img class="head-img mui-action-preview" id="head-img1" src="images/1.PNG" style="width: 90px; height: 90px;"/>
									</span>
									</a>
								</li>
							</ul>
							<!--<button>上传按钮</button>-->
						</div>	
					</li>
				</ul>
		</div>

		
        <script src="js/mui.min.js"></script>
        <script src="js/mui.view.js "></script>
		<script src="js/mui.picker.min.js"></script>
		
		
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>	
		<script type="text/javascript">
			
			
			mui.init();
			//选择图片的数据
			var imgData = "";
			var imgData2 = "";
			var loginName=localStorage.getItem("loginName");
		//更换图片
		mui(".mui-input-row").on("tap", "#head", function(e) {
			if(mui.os.plus){
				var a = [{
					title: "拍照"
				}, {
					title: "从手机相册选择"
				}];
				plus.nativeUI.actionSheet({
					title: "上传图片",
					cancel: "取消",
					buttons: a
				}, function(b) {
					switch (b.index) {
						case 0:
							break;
						case 1:
							getImage();
							break;
						case 2:
							galleryImg();
							break;
						default:
							break;
					}
				})	
			}
			
		});
		
		//手机拍照图片
		function getImage() {
			var c = plus.camera.getCamera();
			c.captureImage(function(e) {
				plus.io.resolveLocalFileSystemURL(e, function(entry) {
					var s = entry.toLocalURL() + "?version=" + new Date().getTime();
					console.log(s);
				//	document.getElementById("head-img").src = s;
					document.getElementById("head-img1").src = s;
				
					var image = new Image();
						image.src = s;
						image.onload = function() {
							imgData = getBase64Image(image);
							console.log(imgData);
					}
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(s) {
				console.log("error" + s);
			}, {
				filename: "_doc/head.jpg"
			})
		}
		
			//本地相册选择 
		function galleryImg() {
			plus.gallery.pick(function(a) {
				plus.io.resolveLocalFileSystemURL(a, function(entry) {
					plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
						root.getFile("head.jpg", {}, function(file) {
							//文件已存在
							file.remove(function() {
								console.log("file remove success");
								entry.copyTo(root, 'head.jpg', function(e) {
										var e = e.fullPath + "?version=" + new Date().getTime();
								//		document.getElementById("head-img").src = e;
										document.getElementById("head-img1").src = e;
										//变更大图预览的src
										//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
										//document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
										var image = new Image();
										image.src = e;
										image.onload = function() {
											imgData2 = getBase64Image(image);
											console.log(imgData2);
										}
								
								},
									function(e) {
										console.log('copy image fail:' + e.message);
									});
							}, function() {
								console.log("delete image fail:" + e.message);
							});
						}, function() {
							//文件不存在
							entry.copyTo(root, 'head.jpg', function(e) {
									var path = e.fullPath + "?version=" + new Date().getTime();
						//			document.getElementById("head-img").src = path;
									document.getElementById("head-img1").src = path;
									
							 		var image = new Image();
										image.src = path;
										image.onload = function() {
											imgData2 = getBase64Image(image);
											console.log(imgData2);
									}
							},
								function(e) {
									console.log('copy image fail:' + e.message);
								});
						});
					}, function(e) {
						console.log("get _www folder fail");
					})
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(a) {}, {
				filter: "image"
			})
		};
		 
		
			//将图片压缩转成base64 
			function getBase64Image(img) {
				var canvas = document.createElement("canvas");
				var width = img.width;
				var height = img.height;
				// calculate the width and height, constraining the proportions 
				if(width > height) {
					if(width > 200) {
						height = Math.round(height *= 350 / width);
						width = 350;
					}
				} else {
					if(height > 200) {
						width = Math.round(width *= 350 / height);
						height = 350;
					}
				}
				canvas.width = width; /*设置新的图片的宽度*/
				canvas.height = height; /*设置新的图片的长度*/
				var ctx = canvas.getContext("2d");
				ctx.drawImage(img, 0, 0, width, height); /*绘图*/
				var dataURL = canvas.toDataURL("image/png", 0.8);
				return dataURL.replace("data:image/png;base64,", "");
			}
			
			
		//发送图文信息
		function information(){
			var describe1=document.getElementById("describe1").value;
			mui.toast("发送成功");
			
			
			var sendImgData = "";
			if(imgData == "") {
					sendImgData = imgData2;
					console.log(sendImgData);
			} else {
					sendImgData = imgData;
					console.log(sendImgData);
				}
				var network=true;
				if(mui.os.plus) {
							mui.plusReady(function() {
								if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
									network = false;
								}
							});
						}
			if(network){
					console.log('网络正常,正在发送请求...');
					
					mui.ajax({
						url:'http://113.71.26.27:8080/tpl/share1/shareSource',
						async: false,
						type:'post',
						data:{
							
							describe1:describe1,
							loginName:loginName,
							Data: sendImgData
						},
						success:function(){
							window.location.href="findoutupdate2.html";
						},
						error: function(xhr, type, errorThrown) {
									plus.nativeUI.toast(errorThrown);
								}
					});
					
			}else{
					mui.toast("当前网络不给力，请稍后再试...");
			}
		}
		
		
		/**
		 * 重写返回事件
		 */
		mui.back = function(){
			
			window.location.href = "findoutupdate2.html";
		}
			</script>
		
	</body>

</html>